/* This is a free layout for anyone to use!
All I ask is that you keep this credit in-tact, or that you put my website link
(https://nonkiru.art) somewhere on your site. 

Otherwise, edit this as much as you'd like! 

Last Updated: 8th December 2024 */

/* These are the default colour codes for the layout.
Changing the colour code here will update it for any element that uses it. */
:root {
    /* Default: Pink */
    --primary: #ffc9c6;

    /* Default: Light Pink */
    --primary_light: #ffedeb;

    /* Default: Dark Pink */
    --primary_dark: #ee918c;

    /* Default: White */
    --secondary: #fefbf5;

    /* Default: Brown */
    --tertiary: #ad4944;

    /* Default: Blue */
    --link: #2453d4;
	
	/* Sketch: Tan */
	--sketch_tan: #E5C7B2
	
	/* Sketch: Blue */
	--sketch_blue: #55938D
}

body {
	min-height: 100vh; 
    background: var(--secondary);
	background-image: url(img/dot_bg_test_bigger.png);	
    color: var(--tertiary);
	background-repeat: no-repeat;
	background-size: cover;
    font-size: 16px;
    font-family: MS Gothic, Verdana, sans-serif;
    line-height: 18px;
	overflow:hidden;
}

/* Link Styling */
a {
    color: var(--link);
    /* Adds a smooth effect to link hover. */
    transition: 0.1s all ease-in-out;
}

a:hover {
    color: var(--primary_dark);
}

a:visited {
    color: purple;
}

/* Header Styling */
h1 {
    display: block;
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 17px;
    margin-top: 3px;
    margin-bottom: 7px;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 3px;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

/* Table Styling */
table {
    border-collapse: collapse;
    width: 100%;
	vertical-align: top;
}

table td, table th {
    border: 1px solid var(--primary);
    padding: 4px;
}

table th {
    text-align: left;
    background-color: var(--primary_light);
}

table img{
	float:left;
	width:150px;
	height:auto;
	border-style: solid ;
    border-width: 2px;
    border-color: var(--tertiary);

}

/* List Styling */
ul {
    list-style-image: url('img/heart_bullet.gif');
    list-style-position: inside;
    margin: 5px;
    padding: 0;
}

/*the section containing content*/
.container {   
    border-radius: 2px;
    width: 650px;
    margin: 12vh auto;
    cursor: move;
	height: 570px;
	box-shadow: 4px 9px var(--tertiary);
	background: #2a9b84;
	/*as in Body, the .container has a gradient bg with a transparent dot png over top for texture */
	background-image: url(img/dot_bg_test.png),
		linear-gradient(180deg,rgba(229, 199, 178, 1) 25%, rgba(85, 147, 141, 1) 100%);
		/*		linear-gradient(0deg, rgba(42, 155, 132, 1) 0%, rgba(245, 227, 147, 1) 100%);   greener version  */
	
	/*maybe unneccessary; used to change the size of the dot png image.*/
	background-size: 650px 100vh;
    border:  solid var(--tertiary);
    border-width: 3px 3px 3px 3px; /* 126px top, 50px elsewhere */

}

.container_background {

}


.box {
    padding: 5px;
	padding-bottom: 0px;
}

.box_header {
    border-bottom: 4px solid var(--tertiary);
/*	border-image: url(img/header_bottom_border_test3.png) 35% stretch;
	border-style: solid;
/*  border-width: 0px 0px 50px 0px; /* 126px top, 50px elsewhere */
    background-color: var(--primary_light);
	/*background-image: url(img/dot_bg_header.png);*/
    height: 120px;
    padding: 5px;
    /* This centers the text vertically. */
    line-height: 20px;
	position: relative; 
}

/* Changes the brightness of the fake buttons on hover. Also changes the cursor. */
.box_header img:hover {
    filter: brightness(103%);
    cursor: pointer;
}

/* Darkens and saturates the buttons on click. Also changes the cursor. */
.box_header img:active {
    filter: brightness(97%) saturate(125%);
    cursor: pointer;
}

.box_header h1{
	position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
}

.overlay_border {
	position: absolute;
	z-index:1; 
}

.text_over {
	z-index: 2;
}

/* getting tired now so writing ur instructions for tomorrow rain!! 
currently working on the image gallery. to do list at present: 
	- try to change the style for the buttons to match the style of the link dropdowns in the header
	- add options to change font for accessibility.
	- also maybe fuck around with the styling of the scrollwheel- would be cool if this was a custom thing!
	- try to make the full-size image popups fit better within the site dimensions so nothing is cut off. 
	- edit the html for the 2023 section of the gallery so that these images can also pop-up on click.   (done!)
	- remake the website's border as an svg? look into how to make it a vector so it soesn't look stretched and terrible.
	- figure out how to make seperate posts in the blog page open on click without them alll
	
also think about maybe:
	- shrinking the borders on the sides and bottom of the main content area to look a bit sleeker
	- tidying up + further developing this border's design
	- maybe experiment with some transparency in the header / top part of border?
	- also maybe experiment with colours of the .container_background{ to be closer to the draft version. */
 
.outside_border {
	width: 650px;
	height: 1000px;
	z-index:3;
}

/*trying to find a way to create a custom image as a border around the main part of my site*/
#borderimg {
/* change the image to border_test_12.png if I want to make it dotted, 11 for not dotted */
  border-image: url(img/border_test_11.png) 35% stretch;
  border-style: solid;
  /*border-width: 126px 50px; /* 126px top and bottom, 30px on the sides */
  border-width: 240px 40px 40px 40px; /* 126px top, 50px elsewhere */
}

/* Mobile Support */
@media only screen and (max-width: 890px) {
    .container {
        position: static;
        width: 100%;
        margin: unset;
        margin-bottom: 5px;
    }
}



/*Section for Dropdowns!!! 
 I tried to put this in a seperate css doc but it seemed to conflict somehow when formatted like that. Thus: it is in the same document as everything else now.
 
/* Style The Dropdown Button */
.dropbtn {
  background-color: var(--primary_light);
  color: var(--primary_dark);
  padding-top: 4px;
  padding-bottom: 20px;
  font-size: 16px;
  border: 1px solid var(--tertiary);
  border-radius: 2px;
  cursor: pointer;
  width: 100px;
  height: 35px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 60px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #d4a072;
  color: var(--tertiary);
}

/* box for the 4 drop-downs in the header to go in, pushes them down to be level with the title Petrichawful. */
.navlinks {
    padding-top: 0px;
}


/* Section for HOME button */

/* Style non-dropdown buttons */
.plainbtn {
  background-color: var(--primary_light);
  color: var(--primary_dark);
  padding-top: 7px;
  padding-bottom: 20px;
  font-size: 16px;
  border: 1px solid var(--tertiary);
  border-radius: 2px;
  cursor: pointer;
  width: 100px;
  height: 35px;
  
}

/* Change the background color of the home button when hovered over */
/* this doesn't work just yet! I think I need to create a new div that contains only the specific instances of the button and replace the "dropdown" in .dropdown:hover with that */
.dropdown:hover .plainbtn {
  background-color: #d4a072;
  color: var(--tertiary);
}

.dropdown img {
	width: 95px;
	margin: none;
	padding: none;
}



.dropdown-one {
  cursor: pointer;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:1
}

.dropdown-two {
  cursor: pointer;
  display: none;
  position: absolute;
  left: 160px;
  top: 0px;
  min-width: 160px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:1
}

.dropdown:hover .dropdown-one, #link1:hover > .dropdown-two {
  display: block;
}

.dropdown-one .dItem {
    color: black;
    padding: 12px 16px;
    display: block;
    text-align: left;
}

.dropdown-one .dItem:hover, .dropdown-two a:hover {
    background-color: #ddd;
}


/* section containing main content + scroll bar etc. */
.blogdiv {
    overflow-y: auto;
    height: 55%;
	/*background-color: #FFAEE966;*/
    background-color: rgba(255, 237, 235, 0.5);
    width: 92%;
	margin-top: 10px;
    border-style: double;
    border-width: 5px;
    border-color: var(--tertiary);
	margin-left: 3%;
	-ms-overflow-style: none;  /* no scroll bar- IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.blogdiv p { 
	margin: 10px;
}

/*styles all secondary popups */
.popup_window {
	width: 350px;
	border-style: double;
	border-width: 2px;
    border-color: var(--tertiary);
	padding: 5px;
	background-color: rgba(255, 237, 235, 0.5);
	float:right;
	cursor: move;
	margin-left: 0px;
	font-size: 13px;
}	

.popup_window button { 
	background-color: var(--primary_light);
	color: var(--tertiary);
	padding-top: 4px;
	padding-bottom: 20px;
	font-family: MS Gothic, Verdana, sans-serif;
    line-height: 18px;
	border: 1px solid var(--tertiary);
	border-radius: 2px;
	cursor: pointer;
	display: block; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	width: auto;
	height: 35px;
}

.popup_window img {
	width: 90%;
}

/*tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.dark-mode {
   /* Default: Pink */
    --primary: #ffffff;

    /* Default: Light Pink */
    --primary_light: #ffffff;

    /* Default: Dark Pink */
    --primary_dark: #ffffff;

    /* Default: White */
    --secondary: #ffffff;

    /* Default: Brown */
    --tertiary: #ffffff;

    /* Default: Blue */
    --link: #ffffff;
	
	/* Sketch: Tan */
	--sketch_tan: #ffffff
	
	/* Sketch: Blue */
	--sketch_blue: #ffffff
}